@use './mixins.scss' as *;

::selection {
  color: #fff;
  background-color: var(--vxp-color-primary-opacity-2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  --header-height: 65px;
  --header-z-index: 10;
  --sub-header-height: 44px;
  --aside-width: 260px;
  --anchor-width: 200px;

  --bg-color: #fff;
  --body-bg-color: var(--vxp-fill-color-background);
  --ghost-bg-color: #234;
  --ghost-padding: 10px;

  --text-align: left;

  &.dark {
    --bg-color: #131719;
    --body-bg-color: #1b1b1b;
    --ghost-bg-color: transparent;
    --ghost-padding: 0;
  }

  @include query-media('xl') {
    --aside-width: 300px;
  }

  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  &.rtl {
    --text-align: right;

    direction: rtl;
  }
}

body {
  margin: 0;
  font-family: var(--vxp-font-family-base);
  color: var(--vxp-content-color-base);
  background-color: var(--bg-color);
  transition: var(--vxp-transition-background);
}

ul {
  padding: 0;
}

pre,
code {
  font-family: var(--vxp-font-family-mono) !important;
  line-height: calc(var(--vxp-font-size-base) * 2);
}

pre {
  outline: 0;
}

article {
  h1 {
    margin: 0.6em 0 1em;
    font-size: 30px;
    font-weight: 400;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 1.6em 0 0.6em;
    font-weight: 400;
  }

  h2 {
    font-size: 24px;
  }
}

p .vxp-linker {
  margin-bottom: 4px;
}

.markdown {
  pre {
    margin: 14px 0;
  }

  :not(pre) > code {
    padding: 3px 5px;
    font-family: var(--vxp-font-family-mono) !important;
    background-color: var(--vxp-fill-color-background);
    border-radius: var(--vxp-radius-small);
    transition: var(--vxp-transition-background);
  }

  p {
    margin: 14px 0;
  }

  blockquote {
    padding: 3px 10px;
    margin: 14px 0;
    font-size: 90%;
    color: var(--vxp-content-color-secondary);
    border-inline-start: 4px solid var(--vxp-border-color-base);

    p {
      margin: 0;
    }

    :not(pre) > code {
      color: var(--vxp-content-color-secondary);
      background-color: var(--vxp-fill-color-background);
    }
  }

  .docs-alert {
    margin: 2em 0;

    p {
      margin: 0;
    }
  }

  a:not([class*='vxp-']) {
    color: var(--vxp-color-primary-light-1);
    text-decoration: none;
  }

  ul:not([class*='vxp-']),
  ol:not([class*='vxp-']) {
    padding-inline-start: 4px;

    & > li {
      padding: 2px 4px;
      margin-inline-start: 20px;
    }
  }

  ul:not([class*='vxp-']) > li {
    list-style-type: circle;
  }

  & > div > :last-child {
    margin-bottom: 0;
  }
}

.md-table {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 28px;
  overflow-x: auto;

  table {
    min-width: 100%;
    font-family: Consolas, Monaco, 'andale mono', 'ubuntu mono', monospace;
    font-size: var(--vxp-font-size-secondary);
    border-spacing: 0;
    border-collapse: collapse;

    th,
    td {
      padding: 10px 16px;
      border: var(--vxp-border-light-2);
    }

    th {
      text-align: var(--text-align);
      white-space: normal;
      background-color: var(--vxp-color-primary-opacity-9);
    }
  }
}

.anchor {
  display: flex;
  align-items: center;

  &__link {
    margin-inline-start: 6px;
    font-size: 20px;
    color: var(--vxp-color-primary-light-1);
    text-decoration: none;
    cursor: pointer;
    opacity: 0%;
    transition: var(--vxp-transition-opacity);
  }

  &:hover &__link,
  &__link:focus {
    opacity: 100%;
  }
}

div[class*='language-'] {
  & > button.copy {
    --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgb(128,128,128)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
    --icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgb(128,128,128)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");

    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-color: var(--vxp-fill-color-base);
    background-image: var(--icon-copy);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 18px;
    border: var(--vxp-border-light-2);
    border-radius: var(--vxp-radius-base);
    opacity: 0%;
    transition: var(--vxp-transition-background), var(--vxp-transition-opacity);

    &:focus {
      opacity: 100%;
    }
  }

  & > button.copied {
    background-image: var(--icon-copied);
  }

  &:hover > button.copy {
    opacity: 100%;
  }

  & > span.lang {
    position: absolute;
    top: 12px;
    right: 18px;
    z-index: 1;
    font-size: 12px;
    color: var(--vxp-content-color-disabled);
    opacity: 100%;
    transition: var(--vxp-transition-opacity);
  }

  &:hover > span.lang,
  & > button.copy:focus + span.lang {
    opacity: 0%;
  }
}
